<template>
  <h1>ref到底能不能定义复杂类型</h1>
  <div>姓名：{{ user.name }}</div>
  <div>年龄：{{ user.age }}</div>
</template>

<script>
import { ref,defineComponent } from "vue";
//defineComponent 可以推测出你传入这个组件的类型是不是正常
export default defineComponent({
  name: "HelloWorld",
  //setup在创建前
  setup(props, context) {
    console.log("setup,composition API执行的入口");
    //定义变量
    const user = ref({name:"lili",age:18}); //其实ref 是可以定义，复杂数据类型的，但是不建议使用
    //过2秒钟修改了age的值，页面会不会是响应式的
    setTimeout(() => {
      user.value.name = "dahua";
      user.value.age = 9;
    }, 2000);
    return { user };
  },
});
</script>

<style></style>